<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            position: relative;
            width: 600px;
            height: 200px;
            margin: 50px auto;
        }

        .box ul.list {
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
            height: 100%;
        }

        .list li {
            float: left;
            width: 600px;
            font-size: 60px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            line-height: 200px;
            background-color: #f00;
        }

        .list li:nth-child(2) {
            background-color: #0ff;
        }

        .list li:nth-child(3) {
            background-color: #ff9000;
        }

        .list li:nth-child(4) {
            background-color: #9000ff;
        }

        .list li:nth-child(5) {
            background-color: #f0f;
        }

        .arrow {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -40px;
            width: 40px;
            font: 600 23px/1.2 "Arial";
            color: #fff;
            text-align: center;
            line-height: 80px;
            background-color: rgba(0, 0, 0, .5);
            user-select: none;
            cursor: pointer;
            height: 50px;
        }

        .arrow-l {
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="list">
            <div class="arrow arrow-l"></div>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <div class="arrow"></div>
        </ul>
    </div>
    <script>
        // 获取箭头元素
        var arrows = document.querySelectorAll(".arrow"),
            // 获取运动元素
            ulEle = document.querySelector("ul.list"),
            // 获取一块儿内容的宽度，即一个li的宽度
            w = ulEle.firstElementChild.offsetWidth,
            // 设置计数器，计算往前或者往后运动几张图片
            count = 0;

        // 上一张
        arrows[0].onclick = function () {
            // 目前第0张，跳转到最后一张
            if (count == 0) {
                // 设置为子元素的个数，这样下面 -- 就相当于运动到最后一张图片
                count = ulEle.children.length;
            }
            count--;
            slow_move(ulEle, -count * w);
        }

        // 下一张
        arrows[1].onclick = function () {
            // 目前最后一张，跳转到第1张
            if (count == ulEle.children.length - 1) {
                // 设置为-1，下面 ++，就回到0
                count = -1;
            }
            count++;
            slow_move(ulEle, -count * w);
        }
    </script>
</body>

</html>